<template>
  <div class="content">
    <item v-for="item of more" :item="item" :key="item.id"></item>
  </div>
</template>

<script>
import Item from "./components/music.vue";
export default {
  data() {
    return {
      more: [],
    };
  },
  components: {
    Item,
  },
  mounted() {
    var { m } = this.$route.params;
    if (m == "hot") {
      this.$http("http://47.108.197.28:3000/top/playlist/highquality").then(
        (res) => {
          this.more = res.data.playlists;
        }
      );
    } else if (m == "new") {
    this.$http("http://47.108.197.28:3000/album/newest").then((res) => {
      res.data.albums.forEach((item) => {
        item.coverImgUrl = item.blurPicUrl;
      });
      this.more = res.data.albums;
    });
    } else if (m == "dj") {
      this.$http("http://47.108.197.28:3000/personalized/djprogram ").then(
        (res) => {
          res.data.result.forEach((item) => {
            item.coverImgUrl = item.picUrl;
          });
          this.more = res.data.result;
        }
      );
    }
  },
};
</script>

<style scoped>
.content {
  width: 750px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>